.panel {
  @apply fixed inset-0 tracking-wider;
}

.panel .overlay,
.panel .main {
  @apply absolute inset-0;
}

.panel .main {
  pointer-events: none;
  perspective: 37.5rem;
  transform: translateY(-100%);
  will-change: transform;
  animation: 0.9s ease-out 0s 1 normal forwards running dropDown;
}

.panel .wrapper {
  @apply h-full w-full;
  will-change: transform;
  animation: 3s ease-out 0s 1 normal forwards running dropWave;
}

.panel .short-line,
.panel .long-line {
  @apply absolute left-1/2 top-0;
  width: 37.5rem;
  height: calc(50% - 11.25rem);
  transform: translateX(-50%);
}

.panel .short-line div,
.panel .long-line div {
  @apply absolute;
  width: 2px;
  height: 200%;
  background-color: var(--theme-color);
}

.panel .short-line div {
  bottom: 0;
}
.panel .short-line div:nth-child(1) {
  left: 3.4375rem;
}
.panel .short-line div:nth-child(2) {
  right: 3.4375rem;
}

.panel .long-line div {
  bottom: -1.5625rem;
}
.panel .long-line div::after {
  @apply absolute block rounded-full;
  content: '';
  left: -0.25rem;
  bottom: -0.25rem;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--theme-color);
}
.panel .long-line div:nth-child(1) {
  left: 1.5625rem;
}
.panel .long-line div:nth-child(2) {
  right: 1.5625rem;
}

.panel .content {
  @apply absolute left-1/2 top-1/2 rounded-xl text-center;
  pointer-events: all;
  width: 37.5rem;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 1.25rem;
  transform: translate(-50%, -50%);
}

.panel .head {
  @apply w-full text-lg;
  height: 3.125rem;
  line-height: 3.125rem;
  box-sizing: border-box;
  border-radius: 0.75rem 0.75rem 0 0;
  background-color: var(--background-color);
}

.panel .body {
  @apply relative m-0 flex w-full list-none flex-wrap px-10 py-4;
  height: 16.25rem;
}

.panel .body li {
  @apply flex w-1/2 items-center justify-center;
}

.panel .body li span {
  @apply inline-block px-3 py-1.5;
  border-style: solid;
  border-width: 1px;
  border-left-width: 1rem;
}

.panel .body li.active {
  color: var(--theme-color);
}

.panel .foot {
  @apply relative w-full;
  height: 3.125rem;
  border-radius: 0 0 0.75rem 0.75rem;
  border-top: 1px solid var(--background-color);
  background-color: var(--background-color);
}

.panel .description {
  @apply absolute bottom-0 left-1/2  cursor-pointer overflow-hidden rounded-full;
  width: 18.75rem;
  height: 3.125rem;
  line-height: 3.125rem;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.04) 0 0 1.25rem;
  transform: translate(-50%, 50%);
  transition: all 0.5s cubic-bezier(0.86, -0.02, 0.08, 1.02) 0s;
}
.panel .description:hover::before {
  transform: translateX(0);
}
.panel .description::before,
.panel .description::after {
  @apply absolute inset-0 block rounded-full;
  content: '';
}
.panel .description::before {
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.86, -0.02, 0.08, 1.02) 0s;
  background-color: var(--background-color);
}
.panel .description::after {
  content: attr(data-title);
}

/* 面板下落动画 */
@keyframes dropDown {
  0% {
    transform: translateY(-100vh);
  }
  15% {
    transform: translateY(0vh);
  }
  30% {
    transform: translateY(-3vh);
  }
  45% {
    transform: translateY(0vh);
  }
  60% {
    transform: translateY(-1.5vh);
  }
  75% {
    transform: translateY(0vh);
  }
  90% {
    transform: translateY(-0.75vh);
  }
  100% {
    transform: translateY(0vh);
  }
}

/* 面板摇动动画 */
@keyframes dropWave {
  0% {
    transform: rotateY(45deg);
  }
  15% {
    transform: rotateY(-5deg);
  }
  30% {
    transform: rotateY(5deg);
  }
  45% {
    transform: rotateY(-2.5deg);
  }
  60% {
    transform: rotateY(2.5deg);
  }
  75% {
    transform: rotateY(-1.25deg);
  }
  90% {
    transform: rotateY(1.25deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
